<script setup lang="ts">
import type { IMenu } from '../../../store/menu'

interface IProps {
  menu: IMenu
  isCollapse?: boolean
}

defineOptions({
  name: 'SubMenu',
  inheritAttrs: false,
})

const {
  menu,
  isCollapse = false,
} = defineProps<IProps>()

const hasChildren = computed(() => {
  return menu.children && menu.children.length > 0
})

</script>

<template>
  <ElSubMenu
    v-if="hasChildren"
    :index="menu.code"
  >
    <template #title>
      <BaseIcon
        v-if="menu.icon"
        :icon="menu.icon"
        :style="{
          marginInlineEnd: isCollapse ? '0' : '4px',
        }"
      />
      <span>{{ menu.name }}</span>
      <span
        v-if="menu.flag"
        class="ml-8px text-12px font-bold"
        :style="{
          color: menu.flagColor,
        }"
      >{{ menu.flag }}</span>
    </template>

    <SubMenu
      v-for="subMenu in menu.children"
      :key="subMenu.code"
      :menu="subMenu"
    />
  </ElSubMenu>

  <ElMenuItem
    v-else
    v-ripple
    :index="menu.code"
  >
    <BaseIcon
      v-if="menu.icon"
      :icon="menu.icon"
      :style="{
        marginInlineEnd: isCollapse ? '0' : '4px',
      }"
    />
    <template #title>
      <span>{{ menu.name }}</span>

      <span
        v-if="menu.flag"
        class="ml-8px text-12px font-bold"
        :style="{
          color: menu.flagColor,
        }"
      >{{ menu.flag }}</span>
    </template>
  </ElMenuItem>
</template>
